<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS-Corner 第二期 Escape XSS示例</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="text" name="txt" id="txt" value="">
            <button id='btnSave'>Submit!</button>
        </div>
        <hr>
        <h2>Without Escape</h2>
        <div id='txtSaved'></div>
        <hr>
        <h2>With Escape</h2>
        <div id='txtSavedEscape'></div>
    </div>

    <script>
        document.querySelector('#btnSave').addEventListener('click', function(e){
            let txt = document.querySelector('#txt').value
            if(txt){
                document.querySelector('#txtSaved').innerHTML = txt
            }
        })
    </script>

    <script src="./escape.js"></script>

    <script>
        const settings = {
            'fuck': 'f***',
            'shit': 's***',
        }
        document.querySelector('#btnSave').addEventListener('click', function(e){
            let txt = document.querySelector('#txt').value
            if(txt){
                let escaped = escape(txt, settings)
                document.querySelector('#txtSavedEscape').innerHTML = escaped
            }
        })
    </script>
</body>
</html>